/*
需求：一个组件有两种调用方式:
 1. 组件调用 (已经学过了)
  局部注册，全局注册
 2. 函数调用 （现在学习）如何用函数去调用这个组件？
  this.$message()
如何解决以上问题？
 第一、目前组件都是以.vue形式存在的，都不是函数形式
 第二、如何让当前组件变成函数形式，只要变成函数形式，就可以使用this方式去调用了
*/

// install + vue.extend + $mount

//

import Loading from './Loading.vue'
export default {
  // install 方法 （安装注册方法）
  // 1. 变函数：只要有了个这个install 方法，我们就可以在这个方法中，去把组件转变为函数
  // 2. use调用：同时，有了install 方法，可以 通过Vue.use(),

  // Vue.extend( options )
  // 1. 以上方法可以把.vue组件，变成一个构造函数
  // 2. 一般 跟install 在一起使用
  // 3. 还需要搭配 $mount 使用
  install(Vue) {
    // 1. 将组件转化为函数
    const MyLoading = Vue.extend(Loading)
    // 2. 通过new去调用这个函数 并且获取这个元素
    const el = new MyLoading()
    // 3. 将这个元素，放在咱们的页面上
    el.$mount('#modal')

    let timer = null
    // 4. 给当前的构造函数，添加一个方法，放在vue的原型，只有这样，才能this调用
    Vue.prototype.$myLoading = function (msg) {
      console.log('el:', el)
      console.log(msg, 'msg')
      el.title = msg.title
      el.show = true
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        el.show = false
      }, 3000)
    }
  },
}
